 
<template>
  <div class="main_wrap">
    <div class="login_logo">
      <img src="#" alt="" />
    </div>
    <form method="post" class="login_form">
      <h1 class="login_title">用户登录</h1>
      <input
        type="text"
        name="username"
        placeholder="用户名"
        class="input_txt"
        autocomplete="off"
        v-model="username"
        @click="errshow = false"
      />
      <input
        type="text"
        name="mobile"
        placeholder="手机号"
        class="input_txt"
        autocomplete="off"
        v-model="mobile"
        @click="errshow = false"
      />
      <el-row>
        <el-button size="small" @click="getSmsCode" class="btnStyle"
          >获取短信验证码</el-button
        >
        <el-input
          placeholder="请输入验证码"
          v-model="smsCode"
          class="smsCode"
        ></el-input>
      </el-row>

      <input
        type="password"
        name="password"
        placeholder="密码"
        class="input_txt"
        v-model="password"
        autocomplete="on"
        @click="errshow = false"
      />
      <div class="error_tip" v-show="errshow">{{ errmsg }}</div>
      <input type="button" value="登 录" class="input_sub" @click="fnLogin" />
    </form>
  </div>
</template>


<script>
import cons from "@/components/constant";
const token = localStorage.token || ''
export default {
  name: "Login",
  data() {
    return {
      errshow: false,
      errmsg: "",
      password: "",
      username: "",
      mobile: "",
      smsCode: "",
    };
  },
  methods: {
    // 获取短信验证码
    getSmsCode() {
      this.axios.get(cons.apis+'/v1/users/sms_code/',{
        params:{
          mobile: this.mobile,
        } ,
        headers:{
          'Authorization':'JWT '+token
        },
        responseType:'json',
      })
      .then((res) => {  
        console.log('发送短信验证码的响应：',res)
        if (res.data.code == 200){
          alert(res.data.msg)
        }else{
          alert("发送短信失败")
        }
      }).catch((err) => {
        console.log('请求错误',err)
      });
    },
    // 登录
    fnLogin() {
      if (this.username == "" || this.password == "") {
        this.errmsg = "用户名或密码不能为空";
        this.errshow = true;
        return;
      }
      //http://www.meiduo.site:8000/meiduo_admin/authorizations/
      
      // 点击登录向后端发送请求
      this.axios.post(cons.apis+'/v1/users/logincount/',{
        username:this.username,
        password:this.password,
        mobile:this.mobile,
        smsCode:this.smsCode
      })
      .then((res) => {
        console.log("登录的响应：",res)
        if(res.data.code == 200){
          // alert(res.data.msg)
          // 本地存储相关数据
          localStorage.token = res.data.data.token
          localStorage.username = res.data.data.username
          localStorage.userID = res.data.data.user_id
          // 切换路由 进入首页
          // this.$router.push('/home')
          this.$router.push({path:"/home"})
        }else{
          this.errmsg = res.data.msg
          this.errshow = true 
        }
      }).catch((err) => {
        console.log("请求错误",err)
      });
    },
  },
};
</script>



<style scoped>
.main_wrap {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: linear-gradient(45deg, #e8f2f3, #bcdae7);
}
.login_logo {
  background: rgba(47, 64, 80, 0.6);
  height: 45px;
}
.smsCode {
  width: 140px;
  margin: 20px auto 0px 20px;
}
.btnStyle {
  margin: 20px auto 0px 20px;
}

.login_logo img {
  margin: 5px 0 0 10px;
}

.login_form {
  width: 330px;
  height: 450px;
  background: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -146px;
  margin-left: -165px;
  overflow: hidden;
  border-radius: 6px;
}
.login_form .error_tip {
  position: absolute;
  font-size: 12px;
  color: #f00;
  bottom: 84px;
  left: 18px;
}
.login_title {
  line-height: 72px;
  text-align: center;
  background: linear-gradient(
    90deg,
    rgba(21, 228, 243, 0.959),
    rgba(58, 153, 242, 0.6)
  );
  color: #fff;
  font-size: 20px;
}
.input_txt {
  display: block;
  margin: 20px auto 0;
  width: 298px;
  height: 32px;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  outline: none;
  text-indent: 10px;
}
.forget_pass {
  display: block;
  width: 298px;
  margin: 10px auto 0;
  text-align: right;
  font-size: 14px;
  color: #5195d0;
}
.input_sub {
  display: block;
  margin: 40px auto 0;
  width: 298px;
  height: 32px;
  border: 0px;
  border-radius: 4px;
  background: rgba(3, 234, 241, 0.938);
  color: #fff;
  cursor: pointer;
}
.input_sub:hover {
  background: rgba(27, 118, 124, 0.973);
}
</style>
